<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</a></el-breadcrumb-item>
		  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card style="margin-top: 15px;">
			 <el-row>
				 <el-col>
					 <el-button type="primary" @click="addCategory">添加分类</el-button>
				 </el-col>
			 </el-row>
			 <!-- 表格视图区域 -->
	  <el-table :data="cateList"
	   border 
	   style="margin-top: 15px;" 
		:header-cell-style="{textAlign: 'center'}"  
		:cell-style="{ textAlign: 'center' }"
		row-key="cat_id"
		:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
		>
	  	<el-table-column label="#" type="index" ></el-table-column>
	  	<el-table-column  label="分类名称" prop="cat_name"></el-table-column>
	  	<el-table-column label="是否有效" prop="email">
			<template slot-scope="scope">
				<i class="el-icon-success" style="color: lightgreen;" v-if="scope.row.cat_deleted === false"></i>
				<i class="el-icon-error" style="color: red;" v-if="scope.row.cat_deleted === true"></i>
			</template>
		</el-table-column>
	  	<el-table-column label="排序" prop="role_name">
			<template slot-scope="scope">
				<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
				<el-tag size="mini" type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
				<el-tag size="mini" type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
			</template>
		</el-table-column>
	  	<!-- 	<template slot-scope="scope">		vue 作用域插槽
	  			{{scope.row}}
	  		</template> -->
	  	</el-table-column>
	  		<el-table-column label="操作" >
	  			<template slot-scope="scope">
	  					<el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
	  					<el-button size="mini" type="danger" icon="el-icon-delete" @click="eliminate(scope.row)"></el-button>
	  			</template>
	  		
	  		</el-table-column>
	  </el-table>
	  <!-- 分页视图区域 -->
	   <el-pagination
	   style="display: flex;justify-content: center;"
	        @size-change="handleSizeChange"
	        @current-change="handleCurrentChange"
	        :current-page="queryInfo.pagenum"
	        :page-sizes="[ 5, 10, 14]"
	        :page-size="queryInfo.pagesize"
	        layout="total, sizes, prev, pager, next, jumper"
	        :total="total">
	      </el-pagination>
		  <!-- 添加分类对话框 -->
		  <el-dialog title="添加分类" :visible.sync="dialogFormVisible" @close="addDialog">
		    <el-form ref="addFormRef" :rules="addFormRules" :model="classification" label-width="80px" class="demo-ruleForm">
		      <el-form-item label="分类名称" prop="cat_name">
		    	<el-input  v-model="classification.cat_name" placeholder="请输入分类名称"></el-input>
		      </el-form-item>
			  <el-form-item label="父级分类">
			  <el-cascader
				  style="width: 70%;"
				  :clearable="true"
				  :filterable="true"
				  change-on-select
				  expand-trigger="hover"
			      v-model="selector"
			      :options="catesssList"
			      @change="handleChange"
					:props="cascaderProps"
				  ></el-cascader>
				  </el-form-item>
		      </el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="dialogFormVisible = false">取 消</el-button>
		      <el-button type="primary" @click="addCate">确 定</el-button>
		    </div>
		  </el-dialog>
		  <!-- 编辑分类对话框 -->
		  <el-dialog title="添加分类" :visible.sync="editFormVisible" @close="editDialog">
		    <el-form ref="editFormRef" :rules="addFormRules" :model="classification" label-width="80px" class="demo-ruleForm">
		      <el-form-item label="分类名称" prop="cat_namee">
		    	<el-input  v-model="editForm.cat_name" placeholder="请输入分类名称"></el-input>
		      </el-form-item>
		      </el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="editFormVisible = false">取 消</el-button>
		      <el-button type="primary" @click="editCate">确 定</el-button>
		    </div>
		  </el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				cateList:[],		//商品分类数据列表
				catesssList:[],		//添加商品分类对话框数据列表
				selector:[],		//选择器数据结果
				queryInfo:{			//获取商品列表请求值
					type:3,
					pagenum:1,
					pagesize:5
				},
				editForm:{			//编辑分类提交数据
					cat_id:0,
					cat_name:''
				},	
				total:0,			//总数据条数	
				dialogFormVisible:false,		//添加分类对话框默认显示隐藏
				editFormVisible:false,			//编辑分类对话框默认显示隐藏
				classification:{				//添加分类对话框数据
					cat_name:'',		//将要添加的分类名称
					cat_pid:0,			//父级分类 id
					cat_level:0			//分类等级
				},
				cascaderProps:{					//指定级联选择器的配置对象
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				addFormRules: {		//添加分类表单验证规则
					  cat_name: [
						{ required: true, message: '请输入分类名称', trigger: 'blur' },
						{ min: 1, max: 10, message: '长度在 1 ~ 10 个字符', trigger: 'blur' }
					  ],
					   cat_namee: [
					
					  ]
				}
			}
		},
		methods:{
			 handleChange(value) {			//监听选择项发生变化
					this.selector = value
					console.log(this.selector);
					if(this.selector.length > 0){		//判断如果 selector 的 length 大于 0  就证明选择了父级分类
						this.classification.cat_pid = this.selector[this.selector.length-1]		//父级分类 id
						this.classification.cat_level = this.selector.length		//分类等级 
					}
			      },
			addDialog(){		//监听添加分类对话框的关闭时间事件
				this.$refs.addFormRef.resetFields()		//重置添加分类对话框数据
				this.selector = []
				this.classification.cat_pid = 0
				this.classification.cat_level = 0
			},
			editDialog(){		//监听编辑分类对话框的关闭时间事件
				this.$refs.editFormRef.resetFields()		//重置编辑分类对话框数据
			},
			handleCurrentChange(newPage){		//监听页码值发生变化
				this.queryInfo.pagenum = newPage
				this.getCategoriesList()
			},
			handleSizeChange(newSize){		//监听的切换当前页面显示多少条
				this.queryInfo.pagesize = newSize
				this.getCategoriesList()
			},
			getCategoriesList(){		//获取商品分类数据列表
				this.$axios.get('categories',{params:this.queryInfo}).then(data => {
					console.log(data.data)
					this.cateList = data.data.data.result
					this.total = data.data.data.total
				})
			},
			addCategory(){		//添加分类按钮事件
			this.$axios.get('categories').then(data => {
				console.log(data.data.data)
				this.catesssList = data.data.data
			})
				this.dialogFormVisible = true
			},	
			addCate(){		//添加分类对话框确定事件
				console.log(this.classification)
				if(this.classification.cat_name != ''){
					this.$axios.post('categories',this.classification).then(data => {
						console.log(data.data)
						if(data.data.meta.status == 201){
							this.$message({message: data.data.meta.msg, type: 'success'});
						}else{
							this.$message({message: data.data.meta.msg, type: 'error'});
						}
						this.getCategoriesList()
						this.addCategory()
						this.dialogFormVisible = false
					})
				}else{
					this.$message({message: '请正确输入分类名称', type: 'error'});
				}
			},
			edit(row){			//编辑按钮事件
				this.editFormVisible = true
				console.log(row)
				this.editForm.cat_name = row.cat_name
				this.editForm.cat_id = row.cat_id
			},
			editCate(){		//编辑对话框确定事件
				if(this.editForm.cat_name != ''){
					this.$axios.put('categories/'+this.editForm.cat_id,{cat_name:this.editForm.cat_name}).then(data => {
						console.log(data.data)
						if(data.data.meta.status == 200){
							this.$message({message: data.data.meta.msg, type: 'success'});
						}else{
							this.$message({message: data.data.meta.msg, type: 'error'});
						}
						this.getCategoriesList()
						this.editFormVisible = false
					})
				}
			},
			eliminate(row){			//删除当前分类事件
				console.log(row)
				this.$confirm('此操作将永久删除该分类, 是否继续?', '提示',{
					confirmButtonText: '确定', cancelButtonText: '取消',type: 'warning'
				        }).then(() => {
							this.$axios.delete('categories/'+row.cat_id).then(data => {
								console.log(data.data)
								this.getCategoriesList()
							})
				          this.$message({type: 'success',message: '删除成功!'
				          });
				        }).catch(() => {
				          this.$message({type: 'info',message: '已取消删除'
				       });          
				   });
			}
		},
		created(){
			this.getCategoriesList()
		}
	}
</script>
	
<style lnag="scss" scoped>
	
</style>
